<template lang="pug">
  div(style="height:100%;width:100%")
   div.el-card(style="width:100%;height:400px; padding:24px")
     div.title 活动基本信息
     el-row.myRow(span="24")
      el-col.myCol(v-for="(item,index) in titleData" :key="index" :span="item.span")
        div.label {{`${item.label}`}}
        div.value {{`${item.type&&item.type==='select'?(item.typeData[item.value]):item.value?item.value:'-'}`}}
   div.el-card(style="width:100%;height:calc(100% - 424px);margin-top:24px;")
    div.title(style="position: absolute;") 报名人员信息
    myTable( ref="myTable" :mySeach="[]"  :tableHeader="tableHeader" :myTableButtons="[]" :myButtons="myButtons" tableBtnStyle="flex-end" :pagination="false" )
</template>
<script>
import myTable from '../components/myTable.vue'
import { childActivityDetail, childActivityExport } from '@/api/educationalAdminstration'

export default {
  name: 'ClockingIn',
  components: {
    myTable
  },
  data () {
    return {
      infoId: this.$route.params.id,
      dialogVisible: false,
      tableHeader: [
        {
          label: '宝宝姓名',
          prop: 'childrenName'
        },
        {
          label: '所属关系',
          prop: 'relation'
        },
        {
          label: '报名人',
          prop: 'userName'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '报名时间',
          prop: 'registerTime'
        }
      ],
      myButtons: [
        {
          label: '导出',
          type: 'warning',
          plain: true,
          click: (data) => {
            console.log('data', data)
          }
        }
      ],
      titleData: [
        {
          label: '活动标题',
          value: '关于主办25年元宵节亲子活动的通知',
          span: 24
        },
        {
          label: '面向班级',
          value: '节日活动',
          span: 12
        },
        {
          label: '活动类型',
          value: '',
          span: 12
        },
        {
          label: '活动地点',
          value: '活动地点',
          span: 12
        },
        {
          label: '活动时间',
          value: '活动时间',
          span: 12
        },
        {
          label: '截至报名时间',
          value: '活动时间',
          span: 12
        },
        {
          label: '备注',
          value: '活动时间',
          span: 24
        },
        {
          label: '活动内容',
          value: '活动时间',
          span: 24
        }
      ]
    }
  },
  mounted () {
    childActivityDetail({ activeId: this.infoId }).then(res => {
      console.log('详情', res)
      this.titleData[0].value = res.activity.title
      this.titleData[1].value = res.classnames.join(',')
      this.titleData[2].value = res.activity.type
      this.titleData[3].value = res.activity.address
      this.titleData[4].value = res.activity.startTime + '-' + res.activity.endTime
      this.titleData[5].value = res.activity.deadlineTime
      this.titleData[6].value = res.activity.remark
      this.titleData[7].value = res.activity.content
      this.$refs.myTable.setMyTableData(res.registrations)
    })
    this.myButtons[0].click = (data) => {
      console.log('导出', data)
      this.$confirm('是否导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        childActivityExport({ id: this.infoId }).then(res => {
          window.location.href = res
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title{
  padding:8px 20px;
  height: 50px;
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  color: #000000;
}
.myRow{
  padding: 0px 20px;
  .myCol{
    padding: 8px 0;
    display: flex;
    .label{
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .value{
      width: calc(100% - 100px);
      padding: 6px 12px;
      margin-left: 8px;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #EBEBEE;
      height: 30px;
    }
  }
}
</style>
